import React from 'react';
import { FaPlay, FaBrain, FaCodeBranch, FaCode, FaGlobe, FaStop } from 'react-icons/fa';

const nodeTypes = [
  { type: 'start', label: '开始', className: 'node-type-start', icon: <FaPlay /> },
  { type: 'llm', label: 'LLM', className: 'node-type-llm', icon: <FaBrain /> },
  { type: 'branch', label: '条件分支', className: 'node-type-branch', icon: <FaCodeBranch /> },
  { type: 'code', label: '代码执行', className: 'node-type-code', icon: <FaCode /> },
  { type: 'http', label: 'HTTP请求', className: 'node-type-http', icon: <FaGlobe /> },
  { type: 'end', label: '结束', className: 'node-type-end', icon: <FaStop /> },
];

function Sidebar() {
  const onDragStart = (event, nodeType) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <aside className="sidebar">
      <h3 className="text-lg font-semibold mb-4">节点类型</h3>
      {nodeTypes.map((node, index) => (
        <div
          key={index}
          className={`node-type-item ${node.className}`}
          onDragStart={(event) => onDragStart(event, node.type)}
          draggable
        >
          <span className="text-lg">{node.icon}</span>
          <span>{node.label}</span>
        </div>
      ))}
      <p className="mt-4 text-xs text-gray-500">
        拖拽节点到画布上，然后连接它们。
      </p>
    </aside>
  );
}

export default Sidebar;